<template>
  <div class="container">
    <el-card class="el-card">
      <el-form inline>
        <el-form-item label="时间">
          <el-date-picker
            type="daterange"
            start-placeholder="开始时间"
            format="yyyy-MM-dd"
            range-separator="至"
            end-placeholder="截止时间"
            :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="省份">
          <el-select v-model="form.provinceCodeList" multiple placeholder="请选择" @change="changeProvince">
            <el-option
              v-for="item in provinces"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="form.cityCodeList"
            multiple
            :disabled="!(form.provinceCodeList.length === 1 && !form.provinceCodeList.includes(0))"
            placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="form.userType" placeholder="请选择">
            <el-option
              v-for="item in userTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item :style="{ display: 'flex', justifyContent: 'flex-end' }">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFields">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="el-card">
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">下单用户数</li>
              <li class="li">订单量</li>
              <li class="li">计划订单量</li>
              <li class="li">实付交易额</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">补贴率</li>
              <li class="li">人均实付交易额</li>
              <li class="li">新用户留存率</li>
              <li class="li">老用户留存率</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日注册用户数</div>
      <line-chart :chart-data="registerLineChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日下单用户数</div>
      <line-chart :chart-data="userOrderLineChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日订单量、每日计划订单量</div>
      <line-chart :chart-data="orderLineChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">订单省份分布</div>
      <Pie-chart :chart-data="orderPieChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">用户省份分布</div>
      <Pie-chart :chart-data="userPieChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">计划订单时长分布</div>
      <Pie-chart :chart-data="planOrderDurationLineChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每月新用户的首单转化率、留存率</div>
      <line-chart :chart-data="crLineChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每月用户的实付交易额、补贴额</div>
      <line-chart :chart-data="paidInTotalChartData" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">补贴率</div>
      <line-chart :chart-data="discountRate" />
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import LineChart from "../dashboard/LineChart";
import PieChart from '../dashboard/PieChart';
import { queryAreaData, queryAreaChildrenData } from '@/api/activity'

export default {
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      form: {
        provinceCodeList: [],
        cityCodeList: [],
        Time: [],
        userType: ''
      },
      provinces: [],
      cities: [],
      userTypeOptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '新用户' },
        { value: '2', label: '老用户' }
      ],
      // 每日注册用户数
      registerLineChartData: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '注册用户',
            values: [100, 120, 161, 134, 105, 160, 165]
          }
        ]
      },
      // 每日下单用户数
      userOrderLineChartData: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '下单用户',
            values: [100, 120, 161, 134, 105, 160, 165]
          }
        ]
      },
      // 每日订单量、每日计划订单量
      orderLineChartData: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '每日订单量',
            values: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            label: '每日计划订单量',
            values: [90, 20, 60, 34, 5, 60, 65]
          }
        ]
      },
      // 订单省份分布
      orderPieChartData: {
        name: '订单省份分布',
        data: [
          {
            name: '北京',
            value: 50
          },
          {
            name: '广东',
            value: 100
          },
          {
            name: '上海',
            value: 80
          },
          {
            name: '江苏',
            value: 110
          },
          {
            name: '福建',
            value: 102
          },
          {
            name: '浙江',
            value: 106
          }
        ]
      },
      // 用户省份分布
      userPieChartData: {
        name: '用户省份分布',
        data: [
          {
            name: '北京',
            value: 50
          },
          {
            name: '广东',
            value: 100
          },
          {
            name: '上海',
            value: 80
          },
          {
            name: '江苏',
            value: 110
          },
          {
            name: '福建',
            value: 102
          },
          {
            name: '浙江',
            value: 106
          }
        ]
      },
      // 计划订单时长分布
      planOrderDurationLineChartData: {
        name: '计划订单时长分布',
        data: [
          {
            name: '半个月',
            value: 500
          },
          {
            name: '一个月',
            value: 400
          },
          {
            name: '三个月',
            value: 300
          },
          {
            name: '六个月',
            value: 200
          },
          {
            name: '十二个月',
            value: 800
          }
        ]
      },
      // 首单转化率、留存率
      crLineChartData: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '首单转化率',
            values: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            label: '留存率',
            values: [90, 20, 60, 34, 5, 60, 65]
          }
        ]
      },
      // 实付交易额、补贴额
      paidInTotalChartData: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '实付交易额',
            values: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            label: '补贴额',
            values: [90, 20, 60, 34, 5, 60, 65]
          }
        ]
      },
      // 补贴率
      discountRate: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '补贴率',
            values: [100, 120, 161, 134, 105, 160, 165]
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name'])
  },
  mounted() {
    this.queryArea()
  },
  created() {},
  methods: {
    handleSearch() {},
    resetFields() {},
    async queryArea() {
      const { code, data } = await queryAreaData()
      if (code !== 200) return;
      this.provinces = data
    },
    async queryAreaChildren(pid) {
      const { code, data } = await queryAreaChildrenData({ pid })
      if (code !== 200) return;
      this.cities = data
    },
    changeProvince(value) {
      console.log(value, '===== value')
      if (value.length === 1) return this.queryAreaChildren(value[0]);
      this.cities = [];
      this.form.cityCodeList = [];
    }
  }
}
</script>

<style scoped lang="stylus">
.container
  .el-card {
    margin: 20px;
    font-size: 14px;
  }
  .flex-row {
    display flex;
    align-items center
  }
  .title {
    font-size: 16px;
    font-weight: 500;
  }
  .li {
    width: 25%;
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .da {
    margin-top: 10px;
    width: 25%;
    font-size: 20px;
    text-align: center;
  }

  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }

  .el-table .warning-row {
    background: rgb(39, 138, 230);
  }
</style>
